<template>
  <div class="tree-child">
    <el-form-item
      v-for="item in data"
      :key="item.id"
      :prop="`${customProp}.${item.name}`"
      :label="item.name"
    >
      <el-checkbox v-model="item.collapse" @change="toggleCollapse(item)"
        >是否折叠</el-checkbox
      >
      <el-collapse-transition>
        <div v-show="item.collapse">
          <div
            v-if="item.children && item.children.length > 0"
            :style="{ 'padding-left': `${childIndex * 30}px` }"
          >
            <tree-child
              :data="item.children"
              :form="childForm[item.name]"
              :index="childIndex"
              :custom-prop="`${customProp}.${item.name}`"
            />
          </div>
          <template v-else>
            <el-input
              v-model="childForm[item.name]"
              clearable
              :disabled="item.role == 1"
              placeholder="请输入"
            />
          </template>
        </div>
      </el-collapse-transition>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: 'TreeChild',
  components: {
    TreeChild: this,
  },
  props: {
    data: Array,
    form: {
      type: Object,
      default: () => {},
    },
    index: Number,
    customProp: String,
  },
  data() {
    return {
      childForm: {},
      childIndex: this.index + 1,
    }
  },
  watch: {
    form: {
      handler(val) {
        this.childForm = val
      },
      deep: true,
    },
    rules: {
      handler(val) {
        this.childRules = val
      },
      deep: true,
    },
    index(newVal) {
      this.childIndex = newVal + 1
    },
  },
  created() {
    this.childForm = this.form
    this.childRules = this.rules
  },
  mounted() {},
  methods: {
    toggleCollapse(item) {
      console.log('item', item)
      item.collapse = !item.collapse
      this.$forceUpdate()
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep {
  .el-form-item + .el-form-item {
    margin-bottom: 22px;
  }
  .el-form-item__label {
    width: 100%;
  }
}
</style>
